<template>
  <div class="songline">
        <!-- hover的样式 -->
        <div class="hov" >
        <div class="empty"></div>
      <!-- # 序号-->
      <span class="span1" >      
      </span>
      <!-- 标题 -->
      <div class="span2">
        <img :src="src" alt="">
        <span></span>
      </div>        
      </div>
    <div class="songlist" :class="col%2==1?`odd`:null">
      <div class="empty"></div>
      <!-- # 序号-->
      <span class="span1" id="spanNone">{{ col<9?'0'+(col+1):col+1 }}</span>
      <!-- 标题 -->
      <div class="span2">
          <img :src="`${src}${this.album.album_pic}`" alt="" @click="toAlubmPage" >
        <span @click="toAlubmPage" >{{ album.album_name }}</span>
                <!-- 一图层 -->
                <div class="svg">
      <svg v-if="isCollect" @click="cancel" class="icon span1"  aria-hidden="true">
            <use xlink:href="#icon-yishoucang"></use>
      </svg>       
      <svg v-else @click="add" class="icon span1"  aria-hidden="true">
            <use xlink:href="#icon-tianjiashoucang"></use>
      </svg>       
      </div>
      </div>
      <!-- 作者 -->
      <span class="span3">{{ album.singer_name }}</span>
      <!-- 发行时间 -->
      <span class="span4">
        <!-- substring截取字符串，第一个参数为截取的索引开始（包含在截取结果内），第二个为索引结束（结束索引的字符不包含在内） -->
        
        {{  }}
        2017.08.28 
      </span>
    </div>
  </div>
</template>

<script>
import {url} from "@/apiUrl"//引入地址
export default {
  data() {
    return {
      src:`${url}/`,
      isCollect:false
    }
  },
  props:{
    album:{},
    col:""
  },
  methods: {
    toAlubmPage() {
      this.$router.push({
        name:'albumPage',
        query:{
          album:this.album,
          id:this.album.album_id
        }})
    },
    is_Collect(){
      this.$store.commit("isCollect",{
        url:this.album.album_pic,
        callback:(flag) => {
        this.isCollect = flag
      } 
      })
    },
    cancel(){
      this.$store.commit("cancelCollect",{
        fieldValue: this.album,
        fieldName: "album_id",
        callback: () => {//更新我喜欢的音乐
          this.$store.commit("getCollect",()=>{
            this.$message({
              message:"已取消收藏",
              duration:"1422"
            })
          })
        }
      })
    },
    add(){
      this.$store.commit("CollectAlbum",{
        album:this.album,
        callback:() => {//更新我喜欢的音乐
            this.is_Collect()//更新收藏状态
            this.$message({
              message:"已收藏该专辑",
              duration:"1422"
            })
        },
      })
    }
  },
  mounted(){
    this.is_Collect()
  },
}
</script>

<style lang="scss" scoped>
@import '/src/assets/common.scss';
.odd{
  background-color:#bfb2d216;
  border-radius:0.7rem;
}
.empty2{
  width:53rem;
}
.icon{
  color:gray;
}
.hov{
  display: none;
  position: absolute;
  z-index:-10;
}
.songline:hover .hov{
.icon-bofang{
  color:#666666;
  margin-left: -1.2rem;
  cursor: pointer;
}
.icon-zanting{
  margin-left:-0.5rem;
}
      margin: 0 1rem;
      display: flex;
      align-items: center;
      background-color:$undercolor-1;
      width: 98.3%;
      height: 100%;
      position: absolute;
      border-radius:0.7rem;
}
.songline:hover 
#spanNone{ 
      opacity: 0;
      cursor: pointer;
}
.songline:hover
 .svg{
      margin-left: 45rem;
      width: 9rem;
      display: block;
      display: flex;
      justify-content: space-between;
      cursor: pointer;
}
.songline {
  user-select: none;
  z-index: 0;
  position: relative;//会导致元素穿透
}  
img{
    margin-right:1rem;
    width: 36px;
    border-radius:0.4rem;
  }
.songlist{
  // display: none;
  position: relative;//会导致元素穿透
  margin: 1rem;
  display: flex;
  align-items: center;
}
.empty {
    width: $empty-w;
    
  }
  .span1 {
    // margin-left: -0.5rem;
    width: $span1-w;
  }
  .span2 {
    width: $span2-w;
    display: flex;
    align-items: center;
    .svg{
      display: none;
    }

    img,.svg,span{
      cursor: pointer;
    }
  }
  .span3 {
    width: $span3-w;
    cursor:pointer;
  }
  .span4 {
    width: $span4-w + 2rem;
  }
  .span5 {
    width: $span5-w;
  }
</style>